<template>
  <div class="questionnaire-page">
    <!-- 主选项卡 -->
    <div class="main-tabs">
      <el-radio-group v-model="activeMainTab" size="large">
        <el-radio-button label="class">班级问卷</el-radio-button>
        <el-radio-button label="school">学校问卷</el-radio-button>
      </el-radio-group>
    </div>

    <!-- 子选项卡 -->
    <div class="sub-tabs">
      <el-radio-group v-model="activeSubTab" size="default">
        <el-radio-button label="published">我发布的</el-radio-button>
        <el-radio-button label="participated">我参与的</el-radio-button>
      </el-radio-group>
    </div>

    <!-- 搜索区域 -->
    <div class="search-area">
      <el-input
          v-model="searchQuery"
          placeholder="搜索问卷标题"
          clearable
          style="width: 300px"
          @keyup.enter="handleSearch"
      />
      <el-button type="primary" @click="handleSearch">
        <el-icon><Search /></el-icon>
        搜索
      </el-button>
    </div>

    <!-- 问卷卡片列表 -->
    <div class="questionnaire-grid">
      <div
          v-for="questionnaire in filteredQuestionnaires"
          :key="questionnaire.id"
          class="questionnaire-card"
      >
        <div class="card-image">
          <el-image
              :src="questionnaire.image"
              fit="cover"
              class="image-content"
          >
            <template #error>
              <div class="image-error">
                <el-icon><Picture /></el-icon>
              </div>
            </template>
          </el-image>
        </div>
        <div class="card-content">
          <h3 class="card-title">{{ questionnaire.title }}</h3>
          <p class="card-description">{{ questionnaire.description }}</p>
          <div class="card-meta">
            <div class="meta-item">
              <el-icon><Clock /></el-icon>
              <span>{{ questionnaire.timeRange }}</span>
            </div>
            <div class="meta-item">
              <el-icon><User /></el-icon>
              <span>{{ questionnaire.responses }}人参与</span>
            </div>
          </div>
          <div class="card-actions">
            <el-button
                v-if="activeSubTab === 'published'"
                size="small"
                @click="handleViewResults(questionnaire)"
            >
              查看结果
            </el-button>
            <el-button
                v-else
                size="small"
                type="primary"
                @click="handleFillQuestionnaire(questionnaire)"
            >
              填写问卷
            </el-button>
            <el-button
                size="small"
                @click="handlePreview(questionnaire)"
            >
              预览
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <el-empty
        v-if="filteredQuestionnaires.length === 0"
        description="暂无相关问卷"
    />

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="filteredQuestionnaires.length"
          :page-sizes="[8, 16, 24, 32]"
          layout="total, sizes, prev, pager, next, jumper"
          background
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Search, Picture, Clock, User } from '@element-plus/icons-vue';

// 选项卡状态
const activeMainTab = ref('class');
const activeSubTab = ref('published');

// 搜索和分页
const searchQuery = ref('');
const currentPage = ref(1);
const pageSize = ref(8);

// 模拟问卷数据
const questionnaires = ref([
  {
    id: 1,
    title: '班级卫生情况调查',
    type: 'class',
    status: 'published',
    description: '了解同学们对班级卫生状况的看法和建议',
    image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    timeRange: '10/01 - 10/15',
    responses: 32,
    isPublished: true
  },
  {
    id: 2,
    title: '班干部满意度调查',
    type: 'class',
    status: 'draft',
    description: '收集同学们对班干部工作的评价',
    image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    timeRange: '10/05 - 10/20',
    responses: 0,
    isPublished: false
  },
  {
    id: 3,
    title: '学校食堂满意度调查',
    type: 'school',
    status: 'published',
    description: '评估学生对学校食堂服务和食品质量的满意度',
    image: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    timeRange: '10/10 - 10/25',
    responses: 156,
    isPublished: true
  },
  {
    id: 4,
    title: '校园设施使用调查',
    type: 'school',
    status: 'ended',
    description: '了解学生对校园设施使用情况的反馈',
    image: 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
    timeRange: '09/15 - 09/30',
    responses: 89,
    isPublished: true
  },
  {
    id: 5,
    title: '班级活动意见征集',
    type: 'class',
    status: 'published',
    description: '收集同学们对班级活动的想法和建议',
    image: 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
    timeRange: '10/08 - 10/22',
    responses: 25,
    isPublished: true
  },
  {
    id: 6,
    title: '教学方式反馈调查',
    type: 'school',
    status: 'published',
    description: '了解学生对当前教学方式的适应情况和改进建议',
    image: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
    timeRange: '10/12 - 10/28',
    responses: 210,
    isPublished: true
  }
]);

// 过滤后的问卷列表
const filteredQuestionnaires = computed(() => {
  return questionnaires.value.filter(q => {
    // 根据主选项卡过滤类型
    const typeMatch = q.type === activeMainTab.value;

    // 根据子选项卡过滤发布/参与状态
    let statusMatch = true;
    if (activeSubTab.value === 'published') {
      statusMatch = q.isPublished;
    } else {
      // 这里可以添加参与状态的过滤逻辑
      statusMatch = true;
    }

    // 搜索条件
    const searchMatch = searchQuery.value === '' ||
        q.title.toLowerCase().includes(searchQuery.value.toLowerCase());

    return typeMatch && statusMatch && searchMatch;
  });
});

// 操作处理函数
const handleViewResults = (row) => {
  console.log('查看结果:', row.title);
};

const handleFillQuestionnaire = (row) => {
  console.log('填写问卷:', row.title);
};

const handlePreview = (row) => {
  console.log('预览问卷:', row.title);
};

const handleSearch = () => {
  currentPage.value = 1;
};
</script>

<style scoped>
.questionnaire-page {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.main-tabs {
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
}

.sub-tabs {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.search-area {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

/* 问卷卡片网格布局 */
.questionnaire-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

/* 问卷卡片样式 */
.questionnaire-card {
  display: flex;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  height: 180px;
}

.card-image {
  width: 40%;
  background-color: #f5f7fa;
}

.image-content {
  width: 100%;
  height: 100%;
}

.image-error {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c0c4cc;
}

.card-content {
  width: 60%;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.card-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-description {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: #606266;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}

.card-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 12px;
  font-size: 12px;
  color: #909399;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.card-actions {
  display: flex;
  gap: 10px;
}

.pagination {
  display: flex;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .questionnaire-grid {
    grid-template-columns: 1fr;
  }

  .questionnaire-card {
    height: auto;
  }

  .card-image {
    width: 30%;
  }

  .card-content {
    width: 70%;
  }
}

@media (max-width: 768px) {
  .card-image {
    width: 40%;
  }

  .card-content {
    width: 60%;
  }

  .card-meta {
    flex-direction: column;
    gap: 5px;
  }
}
</style>
